<template>
  <view class="content">
    <view class="box">
      <text class="header-title min">说两句</text>
      <uni-easyinput
        style="border-bottom: 1rpx solid #9b9b9b3b"
        :inputBorder="false"
        type="textarea"
        :autoHeight="false"
        v-model="feedbackState.opinion"
        placeholder="请留下你的宝贵意见，我们永远是你的倾听者"
      ></uni-easyinput>
    </view>
    <!-- <view class="box">
			<text class="header-title min"
				>为我们的工作评分
				<uni-rate :value="feedbackState.score" :is-fill="false" color="#bbb" active-color="red" @change="scoreClick" />
			</text>
		</view> -->

    <view class="box" style="margin-top: 30rpx">
      <text class="header-title min">上传图片</text>
      <uni-file-picker
        v-model="imageValue"
        mode="grid"
        @select="afterRead"
        @delete="deleteImage"
        fileMediatype="image"
        limit="9"
      ></uni-file-picker>
    </view>
  </view>
  <div class="feedback-footer">
    <button
      class="feedback-btn"
      @click="handleCancel()"
      style="
        background: transparent;
        border: 1rpx solid #00b588;
        color: #00b588;
      "
    >
      取消
    </button>
    <button
      @click="handleSubmit()"
      class="feedback-btn"
      style="
        border: 20rpx;
        background: linear-gradient(90deg, #01e9bd 0%, #007cde 100%);
        color: #ffffff;
      "
    >
      提交
    </button>
  </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { saveUserOpinion } from "@/api/user";
import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";

const feedbackState = reactive({
  opinion: "",
  score: 0,
  resourceUrl: "",
});
const imageValue = ref([]);
const uploadUrlInfo = ref([]);
const afterRead = (e) => {
  console.log("上传文件", e);

  const { tempFilePaths, tempFiles } = e || {};
  console.log("tempFilePaths",tempFilePaths);
  console.log("tempFiles",tempFiles);
  
  const tempFile = tempFilePaths[0];
  //获取图片临时路径
  if (e.tempFilePaths.length) {
    const allPromiseArr = [];
    e.tempFilePaths.forEach((item) => {
      allPromiseArr.push(
        new Promise((resolve) => {
          uni.uploadFile({
            url: "/ht-user/user/appUpload",
            filePath: tempFile,
            name: "file",
            formData: {
              type: 2,
            },
            success: (res) => {
              resolve({ data: res, tempFilePath: item });
            },
          });
        })
      );
    });
    Promise.all(allPromiseArr).then((res) => {
      console.log("res", res);
      if (res.every((item) => item.data.statusCode === 200)) {
        uni.showToast({
          title: "上传成功！",
          icon: "success",
          duration: 2000,
        });
        uploadUrlInfo.value.push(
          ...res.map((item) => {
            return {
              path: JSON.parse(item.data.data).data,
              tempFilePath: item.tempFilePath,
            };
          })
        );
      } else {
        uni.showToast({
          title: "上传失败！请重新上传",
          icon: "error",
          duration: 2000,
        });
      }
    });
  }
};
const deleteImage = (e) => {
  uploadUrlInfo.value = uploadUrlInfo.value.filter(
    (item) => e.tempFilePath !== item.tempFilePath
  );
};

const handleSubmit = () => {
  // 2024-03-07/1709774536956file-1709774537741ht:url
  uni.showModal({
    title: "提示",
    content: "您确定提交该意见反馈？",
    success: function (res) {
      if (res.confirm) {
        const submitUrl = [];
        uploadUrlInfo.value.forEach((item) => {
          submitUrl.push(item.path);
        });
        const result =
          submitUrl.length === 1
            ? submitUrl[0]
            : submitUrl
                .slice(0, -1)
                .map((str) => `${str}ht:url`)
                .join("") +
              (submitUrl.length > 1 ? submitUrl[submitUrl.length - 1] : "");
        feedbackState.resourceUrl = result;
        saveUserOpinion(feedbackState).then((res) => {
          console.log(res);
          if (res.code === 200) {
            uni.showToast({
              title: "提交成功！",
              duration: 2000,
            });
            setTimeout(() => {
              uni.navigateBack();
            }, 2000);
          }
        });
      }
    },
  });
};
const handleCancel = () => {
  uni.navigateBack();
};
function scoreClick(data) {
  console.log(data);
  feedbackState.score = data.value;
}
</script>
<style lang="less" scoped>
.box {
  .header-title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 85vw;
  }
}
.feedback-rate {
  position: absolute;
  right: 100rpx;
  bottom: 50rpx;
}
.feedback-label {
  font-size: @font-size-31;
  font-family: "ali-m";
  color: @color-black;
  margin-left: 35rpx;
  margin-top: 32rpx;
}
.feedback-footer {
  position: fixed;
  bottom: 0;
  background-color: @color-font;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 120rpx;
  width: 100%;
  .feedback-btn {
    width: 40%;
    border-radius: 50rpx;
    font-size: @font-size-31;
  }
}
.feedback-group {
  margin-bottom: 30rpx;
  display: flex;
  flex-direction: column;
  padding-bottom: 50rpx;
  position: relative;
  .f-g-item {
    display: flex;
    flex-direction: column;
  }
}
.feedback-uploader {
  display: block;
  margin: 55rpx 35rpx 0;
}
</style>
